{"componentChunkName":"component---src-templates-blog-post-js","path":"/Today I Learned/DOM_프로퍼티/","result":{"data":{"site":{"siteMetadata":{"title":"JULog","author":"[Ju Chan Hwang]","siteUrl":"https://julog.netlify.app","comment":{"disqusShortName":"","utterances":"JuChanHwang/gatsby-starter-bee"},"sponsor":{"buyMeACoffeeId":"jbee"}}},"markdownRemark":{"id":"c515aebd-c05c-5d42-a8f0-3162ece4693d","excerpt":"DOM 프로퍼티(Property)는 HTML 요소의 어트리뷰트(Attribute)와는 다른 것이다. 브라우저는 HTML 문서를 파싱하고 DOM 트리로 변환하여 메모리에 적재한다. 이때 HTML 요소는 DOM 노드 객체로, HTML 어트리뷰트는 DOM 노드 객체의 프로퍼티가 된다. DOM 프로퍼티는 DOM 노드 객체가 갖는 프로퍼티를 말하며, HTML 어트리뷰트는 HTML 요소가 갖는 어트리뷰트(속성)을 말한다. 아래의 ‘어트리뷰트 바인딩’에서 자세히 살펴볼 것이다. Templatedptj…","html":"<blockquote>\n<p>DOM 프로퍼티(Property)는 HTML 요소의 어트리뷰트(Attribute)와는 다른 것이다. 브라우저는 HTML 문서를 파싱하고 DOM 트리로 변환하여 메모리에 적재한다. 이때 HTML 요소는 DOM 노드 객체로, HTML 어트리뷰트는 DOM 노드 객체의 프로퍼티가 된다. DOM 프로퍼티는 DOM 노드 객체가 갖는 프로퍼티를 말하며, HTML 어트리뷰트는 HTML 요소가 갖는 어트리뷰트(속성)을 말한다. 아래의 ‘어트리뷰트 바인딩’에서 자세히 살펴볼 것이다.</p>\n</blockquote>\n<ul>\n<li>Templatedptj [FormControlName] = “example”을 등록하기 위해서는 example = new FormControl(); 의 방식으로 등록을 해야함</li>\n<li>example = new FormGroup (); // X</li>\n<li>form ⇒ 곡 업로드</li>\n<li>\n<p>compareForm ⇒ 곡 수정</p>\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>ng-container</span> <span class=\"token attr-name\">*ngTemplateOutlet</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>formTemplate; context: {form: form, formGroup: formGroup, type: 'default'}<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>ng-container</span><span class=\"token punctuation\">></span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>ng-container</span> <span class=\"token attr-name\">*ngIf</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>currentUser?.authLevel >= 201 &amp;&amp; compareForm<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>ng-container</span> <span class=\"token attr-name\">*ngTemplateOutlet</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>formTemplate; context: {form: compareForm, formGroup: compareFormGroup, type: 'current'}<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>ng-container</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>ng-container</span><span class=\"token punctuation\">></span></span></code></pre></div>\n</li>\n</ul>","frontmatter":{"title":"DOM 프로퍼티","date":"November 05, 2019"}}},"pageContext":{"slug":"/Today I Learned/DOM_프로퍼티/","previous":{"fields":{"slug":"/JavaScript/Asynchronous_&_RequestAnimationFrame/"},"frontmatter":{"title":"Asynchronous & RequestAnimationFrame","category":"JavaScript","draft":false}},"next":{"fields":{"slug":"/Angular/ng-template_&_ng-container/"},"frontmatter":{"title":"ng-template & ng-container","category":"Angular","draft":false}}}},"staticQueryHashes":["3128451518","96099027"]}